<template lang="html">
    <div class="unmanedUploadPage">
        <div class="tips">
            <img src="/static/images/image_text.png"/>
        </div>
        <div class="uploadCon" v-on:click="chooseImg()">
            <!--<img :src="imgSrc" /><br/>
            <p>一张清晰自拍（不对外展示）</p>-->
            <img  class="imgLeve1" :src="imgSrc"/>
            <img  v-show="isShowImg"  class="imgLeve2" :src="imgSrc"/>
            <img  v-show="isShowDefault"  class=" default" :src="imgDefault" />

            <div class="tipContent">
                <p class="text">本人清晰正脸照</p>
                <p class="toChoose">点击选择照片</p>
            </div>



        </div>
        <div  class="toJump">

            <p class="uploadImg" v-on:click="upLoadImg()" >上传并注册</p>
             <p class="ignore" v-on:click="toIndexPage()">跳过此步骤 在我的-人脸识别中寻找</p>
             <!--<p>serverId:{{serverId}}</p>
             <p>upLoadServerIdData:{{upLoadServerIdData}}</p>-->

        </div>




    </div>
</template>

<script>
    import axios from 'axios'
    import router from '../router/router'
    import { Indicator,Toast } from 'mint-ui';

    export default {
        data: function() {
            return {
                userData: "",
                responseData: "",
                imgSrc:"static/images/image_bg.png",
                imgDefault:"static/images/icon_camera-.png",
                localIds: "",
                serverId: "",
                isShowBtn: true,
                upLoadServerIdData: "",
                isShowImg: false,
                isShowDefault:true,
                isAndroid:"",
                isIOS:"",
                isUpload:false//face++验证合格后方可点击上传按钮
            }
        },

        created: function() {
            moveAction();
            this.deviceType();
            // this.getFaceImgFromServer();
            this.$store.commit('isLoading', true)
            this.$store.commit('changeIndexConf', {
                isFooter: false,
                isToast: false,
            });
            this.registered();
        },
        mounted:function(){
             if(store.get("reload")=="false"){
                store.set("reload",true)

                location.reload();
                return;
            }
            this.$store.commit('isLoading', false)

        },
        methods: {
            getInfo: function() {
                var userInfo = JSON.parse(store.get("userInfo"));
                this.userData = userInfo;
            },
            chooseImg: function() {
              var _this = this;
              wx.chooseImage({
                  count: 1, // 默认9
                  sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                  sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
                  success: function(res) {

                      _this.localIds = res.localIds[0]; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                      // _this.imgSrc=res.localIds[0];
                      // _this.imgLoad();
                      _this.isShowImg = true;
                      _this.isShowDefault=false;
                      // if(_this.isIOS){
                        wx.getLocalImgData({
                           localId: res.localIds[0],
                           success: function (res) {
                             var pre="data:image/jpeg;base64,"
                              if(_this.isIOS){
                                _this.imgSrc= res.localData.replace('jgp', 'jpeg');
                              }else{
                                _this.imgSrc=pre+res.localData;
                              }
                              _this.faceChecks(_this.imgSrc)
                           },
                           fail:function(){
                                 Toast({
                                   message: '微信接口调用失败',
                                   position: 'middle',
                                   duration: 1000
                                   });
                           }
                         });
                  },
                  fail:function(){
                        Toast({
                          message: '微信接口调用失败',
                          position: 'middle',
                          duration: 1000
                          });
                  }
              });
            },
            previewImg: function() {
                wx.previewImage({
                    current: '', // 当前显示图片的http链接
                    urls: [] // 需要预览的图片http链接列表
                });
            },
            upLoadImg: function() {
                if(!this.isUpload){
                    Toast({
                        message: '您尚未选择图片',
                        position: 'middle',
                        duration: 1000
                        });
                        return;
                }
                var _this = this;
                Indicator.open({
                    text: '上传中...',
                    spinnerType: 'triple-bounce'
                    });

                wx.uploadImage({
                    localId: _this.localIds, // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 0, // 默认为1，显示进度提示
                    success: function(res) {
                        // alert(res)
                        // alert("uploadImage；serverId",res.serverId);
                        _this.serverId = res.serverId; // 返回图片的服务器端ID
                        _this.upLoadServerId(res.serverId)

                    },
                    fail:function(res){
                        Indicator.close();
                          Toast({
                            message: '图片上传失败',
                            position: 'middle',
                            duration: 1000
                            });
                        return;


                    },
                    complete:function(res){

                    }

                });
            },
            upLoadServerId: function(serverid) {
                var _this = this;

                axios.get('/member/uploadMemberIcon', {
                        params: {
                            serverId: serverid
                        }
                    })
                    .then(function(response) {
                    //    alert("upLoadServerId:",response.data);
                        let responseData = JSON.parse(response.data)
                        _this.upLoadServerIdData = responseData
                        if (responseData.code == 1) {
                            Indicator.close();
                            Toast({
                                message: '图片上传成功',
                                position: 'middle',
                                duration: 1000
                                });

                            _this.imgSrc = responseData.url;

                             router.replace("/index");


                        } else {
                              Indicator.close();
                            _this.$store.commit('changeIndexConf', {
                                isToast: true,
                                toastTip: responseData.msg
                            });
                            setTimeout(function() {
                                _this.$store.commit('changeIndexConf',   {                    
                                    isToast: false,
                                     toastTip:   ""                
                                });
                            }.bind(_this), 800)
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            },
            faceChecks:function(dataBase64) {
              var _this=this;
              Indicator.open({
                 text: '人脸检测中，请稍等...',
                 spinnerType: 'fading-circle'
               })
               $.ajax({
                   type: "POST",
                   url: "https://api-cn.faceplusplus.com/facepp/v3/detect",
                   data: {
                       api_key: "aq_V9Y0zlQyq-i2jFQ2piQMWgo1O0Atu",
                       api_secret: "DPm47sD5aEeDWxQFpd7WeYKs3mQHQn98",
                       image_base64: dataBase64.split(",")[1],
                       return_landmark:1,
                       return_attributes:"gender,age,smiling,headpose,facequality,blur,eyestatus,emotion,ethnicity"
                   },
                   success: function(data) {
                       Indicator.close();
                       var faceLength=data.faces.length;//人脸个数
                       if (faceLength==0) {
                         Toast({
                           message: '未检测到人脸，请重新选择',
                           position: 'middle',
                           duration: 2000
                           });
                           return;
                       }
                       var facequality=data.faces[0].attributes.facequality.value,//人脸质量
                           face_threshold=80,//人脸质量判断阀值
                           blurness=data.faces[0].attributes.blur.blurness.value,//新的人脸模糊分析结果
                           blur_threshold=50;//人脸模糊判断阀值
                       if (faceLength>1) {
                         Toast({
                           message: '检测到多张人脸，请重新选择'/**+facequality**/,
                           position: 'middle',
                           duration: 2000
                           });
                           return;

                       }
                       if (facequality<face_threshold) {
                         Toast({
                           message: '人脸质量过低,请重新拍照，并确保五官正对摄像头',
                           position: 'middle',
                           duration: 2000
                         });
                           return;
                       }
                       if (blurness>blur_threshold) {
                         Toast({
                           message: "人脸质量过低,请重新拍照"/**+facequality+"||模糊度："+blurness**/,
                           position: 'middle',
                           duration: 2000
                         });
                         return;
                       }
                       if (faceLength == 1 && facequality>=face_threshold &&blurness<blur_threshold) {
                         _this.isUpload = true;
                         Toast({
                           message: '人脸检测成功，请上传'/**+facequality+"||模糊度："+blurness*/,
                           position: 'middle',
                           duration: 2000
                           });
                           return;
                       }

                   },
                   error: function(err) {
                       Indicator.close();
                       Toast({
                         message: '人脸检测失败，请重新拍照',
                         position: 'middle',
                         duration: 1000
                         });
                   }
               })

           },
            getFaceImgFromServer: function() {
                var _this = this;
                axios.get('/member/getFaceImg')
                    .then(function(response) {
                        let resData = JSON.parse(response.data)
                            // console.log(resData);
                        if (!resData.url) {
                            _this.imgSrc = "../../static/images/icon_camera.png";
                            _this.isShowImg = true;
                        } else {
                            _this.isShowImg = false;
                            _this.imgSrc = resData.url;
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            },
            deviceType:function(){
              var u = navigator.userAgent, app = navigator.appVersion;
              this.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
              this.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            },
            toIndexPage:function(){
                    router.replace("/index");
                    return;
            },
            registered: function() {
                var xmUrl = location.href.split('#')[0];
                axios.get('/auth/signature.do?url=' + xmUrl)
                    .then(function(response) {
                        var xmappId = response.data.appId;
                        var xmtimestamp = response.data.timestamp;
                        var xmnonceStr = response.data.nonceStr;
                        var xmsignature = response.data.signature;
                        wx.config({
                            debug: false,
                            appId: xmappId,
                            timestamp: xmtimestamp,
                            nonceStr: xmnonceStr,
                            signature: xmsignature,
                            jsApiList: [
                                'checkJsApi',
                                'onMenuShareTimeline',
                                'onMenuShareAppMessage',
                                'onMenuShareQQ',
                                'onMenuShareWeibo',
                                'hideMenuItems',
                                'showMenuItems',
                                'hideAllNonBaseMenuItem',
                                'showAllNonBaseMenuItem',
                                'translateVoice',
                                'startRecord',
                                'stopRecord',
                                'onRecordEnd',
                                'playVoice',
                                'pauseVoice',
                                'stopVoice',
                                'uploadVoice',
                                'downloadVoice',
                                'chooseImage',
                                'previewImage',
                                'uploadImage',
                                'downloadImage',
                                'getNetworkType',
                                'openLocation',
                                'getLocation',
                                'hideOptionMenu',
                                'showOptionMenu',
                                'closeWindow',
                                'scanQRCode',
                                'chooseWXPay',
                                'openProductSpecificView',
                                'addCard',
                                'chooseCard',
                                'openCard'
                            ]
                        });
                    })
                    .catch(function(error) {

                    });

                wx.error(function(res) {

                    _self.$store.commit('changeIndexConf',   {                    
                        isToast:  true,
                        toastTip:   "系统出现问题,请暂勿使用,谢谢配合"                
                    });
                });
                var _self = this;
                wx.ready(function() {
                //    _self.chooseImg();
                });
            }

        }
    }
</script>

<style lang="scss" scoped>
    @import "../../static/css/unmannedUpload.scss";
</style>
